<template>
	<div class="container">
		<h1>帮助中心</h1>
		<div class="first">
			<div class="left">
				<div>HI~，请问有什么可以帮助您！</div>
				<p>工作时间：上午9:00-12:00</p>
				<p>下午13:00-15:00</p>
			</div>
			<div class="right">
				<img src="../../../../public/img/help.png" />
			</div>
		</div>
		<div class="second">
			<div class="line1">
				<p class="p1">常见问题</p>
				<p>充值长时间不到账怎么办？</p>
			</div>
			<div class="line2">
				<p>宿舍报修申请多久会派维修工来？</p>
			</div>
			<div class="line3">
				<p>查看水电费是实时的吗？</p>
			</div>
		</div>
		<div style="width:800px;margin-left:130px">
			<el-row>
				<el-col :span="10">
					<el-input v-model="textarea1" style="width: 240px;height:200px"  type="textarea" placeholder="提交留言" />
				</el-col>
				<el-col :span="14">
					<el-button type="primary" @click="getLiu">提交留言</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup name="help">
import {  LoginInfo } from "@/api/student/home";
import {  addLiu } from "@/api/admin/home";
import { ref } from "vue";
const textarea1 = ref("");
const getLiu =async () => {
	if (!textarea1.value) {
		 ElNotification({
			message: "数据输入不完整",
			type: "error",
			duration: 3000
		});
        return;
	}
    // 提交留言
    
    const info = JSON.parse(localStorage.getItem('GlobalState')).userInfo?.id;
    const res = await LoginInfo(info);
    let obj = {
        content:textarea1.value,
        student_id:res.data.data[0]?.studentcard
    }
    // console.log(info)
    const sumbitLiu = await addLiu(obj);
    if(sumbitLiu.data.code === 200){
        ElNotification({
			message: "留言提交成功",
			type: "success",
			duration: 3000
		});
        textarea1.value = ''
    }else{
        ElNotification({
			message: "留言提交失败",
			type: "error",
			duration: 3000
		});
    }
    // console.log(sumbitLiu)
};
</script>

<style scoped>
.container {
	h1 {
		text-align: center;
	}
	.first {
		height: 100px;
		.left {
			float: left;
			width: 48%;
			text-align: right;
			div {
				font-size: 30px;
				color: cornflowerblue;
			}
			p {
				margin-right: 222px;
			}
		}
		.right {
			float: left;
			width: 100px;
			height: 100px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.second {
		width: 80%;
		height: 200px;
		margin: 50px auto;
		border-radius: 10px;
		background-color: rgb(168, 171, 178);
		.line1 {
			height: 40%;
			border-bottom: 1px solid beige;
			display: flex;
			align-items: center;
			.p1 {
				font-weight: bolder;
				font-size: 20px;
			}
		}
		.line2,
		.line3 {
			height: 30%;
			display: flex;
			align-items: center;
		}
		.line3 {
			border-top: 1px solid beige;
		}
		p {
			font-size: 16px;
			margin-left: 50px;
		}
	}
}
</style>
